<template>
	<!-- 胜平负 -->
	<view>
		<view class="yc-data-checkbox">
			<view class="checkbox ">
				<view class="box"><!-- 胜平负 -->
					<view class="box" v-if="noshowgame(0,'spf')">
						<view class="check" v-for="item,index in styledata.spf.res" :key="index"
						:style="styledata.spf.style[index]==0?'':' background-color: red; color: #fff;'" @click="change('spf',index,0)">
							<view class="huadan">
								<view :class="noshowdan(0)?'inner-box1':''">
									<text v-show="noshowdan(0)" style="transform: scale(0.8);">单</text>
								</view>
								<text style="font-weight: 700;font-size:28rpx;">{{item}}</text>
								<text style="margin-left: 5px;font-size:28rpx;">
									{{ fixSelectData.spf[index]}}
								</text>
							</view>
						</view>
					</view>
					<view v-else class="check" style="flex: 1;">
						<view style="color: #999999;">
							未开售
						</view>
					</view>
				</view>
				<view class="box"><!-- 让球胜平负 -->
					<view class="box" v-if="noshowgame(1)">
						<view class="check" v-for="item,index in styledata.rq.res" :key="index"
						:style="styledata.rq.style[index]==0?'':' background-color: red; color: #fff;'" @click="change('rq',index,1)">
							<view class="huadan">
							
								<view :class="noshowdan(1)?'inner-box1':''">
									<text v-show="noshowdan(1)"
										style="transform: scale(0.8);">单</text>
								</view>
								<text style="font-weight: 700;font-size:28rpx;">{{item}}</text>
								<text style="margin-left: 5px;font-size:28rpx;">
									{{ fixSelectData.rq[index]}}
								</text>
							</view>
						</view>
					</view>
					<view v-else class="check" style="flex: 1;">
						<view style="color: #999999;">
							未开售
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import date from "/common/getdatetime.js";

export default {
  props: {
    Refresh: {
      type: [Boolean, Number],
      default: false
    },
    fixSelectData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      styledata: {},
      deleteId: this.fixSelectData.id,
      temporaryArr: ''
    };
  },
  watch: {
    Refresh(newval, oldval) {
      this.init();
    }
  },
  methods: {
    init() {
      this.temporaryArr = '';
      // 字典
      var arr = {
        spf: {
          style: [0, 0, 0],
          res: ['胜', '平', '负'],
        },
        rq: {
          style: [0, 0, 0],
          res: ['让胜', '让平', '让负'],
        }
      };
      this.styledata = arr;
    },
    change(game, index, gameId) {
      var array = {
        'awayTeamAbbName': this.fixSelectData.short_away,
        'homeTeamAbbName': this.fixSelectData.short_home,
        'matchId': this.fixSelectData.id,
        'leagueAbbName': this.fixSelectData.short_comp,
        'matchNumStr': this.fixSelectData.issue_num,
        'gameDeadline': date.getNowFormatDate(0, this.fixSelectData.match_time * 1000),
        'orderDeadline': '',
        'sort': this.fixSelectData.match_time,
        'data': [{
          'res': this.styledata[game].res[index],
          'rate': this.fixSelectData[game][index],
          'poolEs': Number(this.noshowdan(gameId)),
          'gameState': game
        }],
      };
      if (this.styledata[game].style[index] == 0) { // 添加
        this.styledata[game].style[index] = 1;
        if (this.temporaryArr == '') { // 如果是第一次选择直接添加进去
          var ojb = {
            gameData: array,
            selectBoole: true, // 判断是否取消整场比赛
          };
          this.temporaryArr = ojb;
        } else { // 否则只添加玩法进去
          this.temporaryArr.selectBoole = true;
          var newOjd = {
            'res': this.styledata[game].res[index],
            'rate': this.fixSelectData[game][index],
            'poolEs': Number(this.noshowdan(gameId)),
            'gameState': game
          };
          this.temporaryArr.gameData.data.push(newOjd);
        }
        if (game == 'rq') {
          this.temporaryArr.gameData['goal'] = this.fixSelectData.rq.goalLine;
        } // 如果是让球玩法添加让球数值
        this.$emit('getSelectList', this.temporaryArr); // 最后把处理好的数据发给父页面
      } else { // 删除
        this.styledata[game].style[index] = 0;
        if (this.temporaryArr.gameData.data.length == 1) { // 当只有一个的情况下直接全部删除
          array.data = []; // 清空已选择玩法
          var ojb = {
            gameData: array,
            selectBoole: false,
          };
          this.temporaryArr = ojb;
        } else { // 否则删除取消选择用户点击的玩法
          var Delindex = this.temporaryArr.gameData.data.findIndex(item => item.res == this.styledata[game].res[index]);
          this.temporaryArr.gameData.data.splice(Delindex, 1);
          if (game == 'rq') { // 如果用户取消让球玩法就删除让球数值
            var isGoal = false;
            for (var i = 0; i < this.temporaryArr.gameData.data.length; i++) { // 循环判断是否还有让球玩法
              var booleIndex = this.styledata.rq.res.indexOf(this.temporaryArr.gameData.data[i].res);
              if (booleIndex != -1) { isGoal = true; break; }
            }
            if (!isGoal) {
              delete this.temporaryArr.gameData['goal'];
            }
          }
        }
        this.$emit('getSelectList', this.temporaryArr); // 最后把处理好的数据发给父页面
      }
    },
    noshowdan(id) {
      id = String(id);
      var res = this.fixSelectData.sell_status[id];
      if (res == '2') {
        return true;
      } else {
        return false;
      }
    },
    noshowgame(id, gameType) {
      var res = this.fixSelectData.sell_status[id];
      if (res == '1' || res == '2' || this.fixSelectData[gameType].length > 1 || this.fixSelectData[gameType]['goalLine']) {
        return true;
      } else {
        return false;
      }
    },
    openpopup() {
      this.$refs.hhggpopup.open('bottom');
    },
    closeupup() {
      this.$refs.hhggpopup.close('bottom');
    }
  },
  created() {
    this.init();
  }
};
</script>

<style>
	.inner-box1 text {
		position: absolute;
		left: 25%;
		bottom: -2px;
		color: #fff;
		transform: translateX(-50%);
	}
	
	.inner-box1 {
	
		width: 50%;
		height: 50%;
		background-color: red;
		transform: rotate(-45deg);
		position: absolute;
		left: -15%;
		top: -15%;
	}
	
	.huadan {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 100%;
		height: 100%;
		/* background-color: orange;    */
		overflow: hidden;
	}
	
	.check {
		flex:1;
		border-radius:10rpx;
		display: flex;
		justify-content: center;
		align-items: center;



		/* 边框 */
		border: 3rpx solid #edf0f3;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.box {

		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		text-align: center;


	}

	text {
		margin: 1px;
		font-size: 20rpx;

		text-align: center;
	}
	
	.button {
		height: 80rpx;
		width: 100%;
		color: #ff0000;
		font-size: 26rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	
		/* 边框 */
		border: 3rpx solid #ff0000;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	.buttonbox {
		flex: 2;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		/* 边框 */
		border: 1rpx solid #edf0f3;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.buttonboxx {
		display: flex;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		/* 边框 */
		/* border: 1rpx solid #edf0f3;
	  -webkit-box-sizing: border-box; 
	  box-sizing: border-box; */
	}

	.checkbox {

		flex: 8;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* 边框 */
		/* border: 1rpx solid #edf0f3;
	  -webkit-box-sizing: border-box; 
	  box-sizing: border-box; */
	}

	.yc-data-checkbox {
		margin: 5px;
		height: 150rpx;
		display: flex;
		flex-direction: row;
		text-align: center;


	}
</style>